<template>
  <div class="study">
		<x-header :left-options="{backText: ''}">学习教育</x-header>		
		<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->
			
		<!--加载完成后 start-->
  	<div class="loadingOver" v-show="status == 1">
			<tab>
	      <tab-item selected @on-item-click="onItemClick" class="selectBtn" :typeId="meetingLearningID">会议学习</tab-item>
	      <tab-item @on-item-click="onItemClick" class="selectBtn" :typeId="lecturesLearningID">党课学习</tab-item>
	      <tab-item @on-item-click="onItemClick" class="selectBtn" :typeId="activityDayID">活动日</tab-item>
	      <tab-item @on-item-click="onItemClick" class="selectBtn" :typeId="distanceLearningID">远程学习</tab-item>
	   	</tab>
			
			<div class="latest-list">
				<ul class="latest-listContent" v-show="index == 0">
						<li class="studyList" v-for="(studyList,index) in meetingLearningForm">
							<router-link to="">
								<div class="studyList-title" v-text="studyList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
								<div class="studyList-img">
									<img src="../assets/img/login-logo.png"/>
								</div>
								<div class="clear"></div>
								<div class="studyList-time" v-text="studyList.CRDate.substr(0,10)">2017-10-10</div>
								<div class="studyList-view">已阅：<span v-text="exchangeArray(studyList.ReadUser)">3</span>次</div>
							</router-link>
							<span class="touchId" :dataId="studyList.ID" @click="meetingLearningFormShow"></span>
						</li>
						<li class="loadMore" v-text="meetingLearningFormLoadingText" v-if="meetingLearningFormLength > 8" @click="meetingLearningFormMore"></li>
				</ul>
				
				<ul class="latest-listContent" v-show="index == 1">
						<li class="studyList" v-for="(studyList,index) in lecturesLearningForm">
							<router-link to="">
								<div class="studyList-title" v-text="studyList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
								<div class="studyList-img">
									<img src="../assets/img/login-logo.png"/>
								</div>
								<div class="clear"></div>
								<div class="studyList-time" v-text="studyList.CRDate.substr(0,10)">2017-10-10</div>
								<div class="studyList-view">已阅：<span v-text="exchangeArray(studyList.ReadUser)">3</span>次</div>
							</router-link>
							<span class="touchId" :dataId="studyList.ID"  @click="lecturesLearningFormShow"></span>
						</li>
						<li class="loadMore" v-text="lecturesLearningFormLoadingText" v-if="lecturesLearningFormLength > 8" @click="lecturesLearningFormMore"></li>
				</ul>
				
				<ul class="latest-listContent" v-show="index == 2">
						<li class="studyList" v-for="(studyList,index) in activityDayForm">
							<router-link to="">
								<div class="studyList-title" v-text="studyList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
								<div class="studyList-img">
									<img src="../assets/img/login-logo.png"/>
								</div>
								<div class="clear"></div>
								<div class="studyList-time" v-text="studyList.CRDate.substr(0,10)">2017-10-10</div>
								<div class="studyList-view">已阅：<span v-text="exchangeArray(studyList.ReadUser)">3</span>次</div>
							</router-link>
							<span class="touchId" :dataId="studyList.ID" @click="activityDayFormShow"></span>
						</li>
						<li class="loadMore" v-text="activityDayFormLoadingText" v-if="activityDayFormLength > 8" @click="activityDayFormMore"></li>
				</ul>
				
				<ul class="latest-listContent" v-show="index == 3">
						<li class="studyList" v-for="(studyList,index) in distanceLearningForm"> 
							<router-link to="">
								<div class="studyList-title" v-text="studyList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
								<div class="studyList-img">
									<img src="../assets/img/login-logo.png"/>
								</div>
								<div class="clear"></div>
								<div class="studyList-time" v-text="studyList.CRDate.substr(0,10)">2017-10-10</div>
								<div class="studyList-view">已阅：<span v-text="exchangeArray(studyList.ReadUser)">3</span>次</div>
							</router-link>
							<span class="touchId" :dataId="studyList.ID" @click="distanceLearningFormShow"></span>
						</li>
						<li class="loadMore" v-text="distanceLearningFormLoadingText" v-if="distanceLearningFormLength > 8" @click="distanceLearningFormMore"></li>
				</ul>
			</div>	
		</div>
		<!--加载完成 end-->

	</div>
</template>

<script>
import Api from 'assets/js/api';
import init from '../assets/js/init';
import { XHeader, Actionsheet, TransferDom } from 'vux'
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'

var api = new Api();
var result = localStorage.getItem('result');
var meetingLearningID;//会议学习信息ID
var lecturesLearningID;//党课学习信息ID
var activityDayID;//活动日信息ID
var distanceLearningID;//远程学习信息ID
export default {
  name: 'login',
  data () {
    return {
    	status:'0',//默认加载状态为0
			index: '0',//要跳转的tabIndex
			meetingLearningForm:[],
			meetingLearningFormLoadingText:'点击加载更多',
			meetingLearningFormLength:'',
			meetingLearningFormPage:1,//初始默认meetingLearningForm为加载第一页，往后每点击一次加载更多则增加一页
			lecturesLearningForm:[],
			lecturesLearningFormLoadingText:'点击加载更多',
			lecturesLearningFormLength:'',
			lecturesLearningFormPage:1,//初始默认lecturesLearningForm为加载第一页，往后每点击一次加载更多则增加一页
			activityDayForm:[],
			activityDayFormLoadingText:'点击加载更多',
			activityDayFormLength:'',
			activityDayFormPage:1,//初始默认activityDayForm为加载第一页，往后每点击一次加载更多则增加一页
			distanceLearningForm:[],
			distanceLearningFormLoadingText:'点击加载更多',
			distanceLearningFormLength:'',
			distanceLearningFormPage:1,//初始默认distanceLearningForm为加载第一页，往后每点击一次加载更多则增加一页
			meetingLearningID: '',//会议学习ID
			lecturesLearningID:'',//党课学习ID
			activityDayID:'',//活动日ID
			distanceLearningID:'',//远程学习ID
			loadingListId:'',
    }
  },
  created(){
  	var self = this;
  	var selectBtnGroup = document.querySelectorAll('.selectBtn');
		console.log(result);
		//获取ID类别
		api.post(api.url.studyData, {
			Action: 'XTGL_GETZIDIANSLIST',
			p1:'24',
			szhlcode: result
		}).then((response) => {
			console.log(response);
			meetingLearningID = self.meetingLearningID = response.data.Result[2].ID;
			lecturesLearningID = self.lecturesLearningID = response.data.Result[3].ID;
			activityDayID = self.activityDayID = response.data.Result[1].ID;
			distanceLearningID = self.distanceLearningID = response.data.Result[0].ID;
			for(var i = 0; i < selectBtnGroup.length; i++){
			if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					self.loadingListId = selectBtnGroup[i].getAttribute('typeId');
					console.log(selectBtnGroup[i].getAttribute('typeId'));		
				}
			}
			//默认获取会议学习内容
			api.post(api.url.study, {
				Action: 'JYGL_GETJYLISTBYAPP',
				p: 1,
				pagecount: 8,
				P2 : self.loadingListId,
				szhlcode: result
			}).then((response) => {
				console.log(response)
				self.meetingLearningForm = response.data.Result;
				self.meetingLearningFormLength = response.data.Result1;
				self.lecturesLearningForm = response.data.Result;
				self.activityDayForm = response.data.Result;
				self.distanceLearningForm = response.data.Result;
				if(response.status == 200){
					this.status = 1;
				}
			}).catch((error) => {
				console.log(error);
			});
		}).catch((error) => {
			console.log(error);
		});
  },
  activated(){
  	var self = this;
  	var selectBtnGroup = document.querySelectorAll('.selectBtn');
		console.log(result);
		//获取ID类别
		api.post(api.url.studyData, {
			Action: 'XTGL_GETZIDIANSLIST',
			p1:'24',
			szhlcode: result
		}).then((response) => {
			console.log(response);
			meetingLearningID = self.meetingLearningID = response.data.Result[2].ID;
			lecturesLearningID = self.lecturesLearningID = response.data.Result[3].ID;
			activityDayID = self.activityDayID = response.data.Result[1].ID;
			distanceLearningID = self.distanceLearningID = response.data.Result[0].ID;
			for(var i = 0; i < selectBtnGroup.length; i++){
			if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					self.loadingListId = selectBtnGroup[i].getAttribute('typeId');
					console.log(selectBtnGroup[i].getAttribute('typeId'));		
				}
			}
			//默认获取会议学习内容
			api.post(api.url.study, {
				Action: 'JYGL_GETJYLISTBYAPP',
				p: 1,
				pagecount: 8,
				P2 : self.loadingListId,
				szhlcode: result
			}).then((response) => {
				console.log(response)
				self.meetingLearningForm = response.data.Result;
				self.meetingLearningFormLength = response.data.Result1;
				self.lecturesLearningForm = response.data.Result;
				self.activityDayForm = response.data.Result;
				self.distanceLearningForm = response.data.Result;
				if(response.status == 200){
					this.status = 1;
				}
			}).catch((error) => {
				console.log(error);
			});
		}).catch((error) => {
			console.log(error);
		});

  },
  methods:{
  	onItemClick (index) {
  		var self = this;
  		this.index = index;
  		if(this.index == 0){
  			/*if(self.meetingLearningForm == 0){*/
  				api.post(api.url.study, {
						Action: 'JYGL_GETJYLISTBYAPP',
						p: 1,
						pagecount: 8,
						P2 : meetingLearningID,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.meetingLearningForm = response.data.Result;
					}).catch((error) => {
						console.log(error);
					});
  			/*}*/
  		}
  		if(this.index == 1){
  			/*if(self.lecturesLearningForm == 0){*/
  				this.status = 0;
  				api.post(api.url.study, {
						Action: 'JYGL_GETJYLISTBYAPP',
						p: 1,
						pagecount: 8,
						P2 : lecturesLearningID,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.lecturesLearningForm = response.data.Result;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
  			/*}*/
  		}
  		if(this.index == 2){
  			/*if(self.activityDayForm == 0){*/
  				this.status = 0;
  				api.post(api.url.study, {
						Action: 'JYGL_GETJYLISTBYAPP',
						p: 1,
						pagecount: 8,
						P2 : activityDayID,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.activityDayForm = response.data.Result;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
  			/*}*/
  			
  		}
  		if(this.index == 3){
  			/*if(self.distanceLearningForm == 0){*/
  				this.status = 0;
  				api.post(api.url.study, {
						Action: 'JYGL_GETJYLISTBYAPP',
						p: 1,
						pagecount: 8,
						P2 : distanceLearningID,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.distanceLearningForm = response.data.Result;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
  			/*}*/
  		}
  	},
  	meetingLearningFormMore(){
  		this.meetingLearningFormPage += 1;
			var self = this;
			this.meetingLearningFormLoadingText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'JYGL_GETJYLISTBYAPP',
					p: self.meetingLearningFormPage,
					pagecount: (self.meetingLearningFormLength - self.meetingLearningFormPage*8) > 0 ? 8 : 8 - Math.abs(self.meetingLearningFormLength - self.meetingLearningFormPage*8),
					P2 : meetingLearningID,
					szhlcode: result
				}
			}).then(response=>{ 
				console.log(response)
				self.meetingLearningForm = self.meetingLearningForm.concat(response.data.Result);
				this.meetingLearningFormLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.meetingLearningFormLoadingText = '点击加载更多';
			})
			if(this.meetingLearningForm.length == this.meetingLearningFormLength){
				this.meetingLearningFormLoadingText = '信息已经更新为最新的了！';
			}
  	},
  	lecturesLearningFormMore(){
  		this.lecturesLearningFormPage += 1;
			var self = this;
			this.lecturesLearningFormLoadingText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'JYGL_GETJYLISTBYAPP',
					p: self.lecturesLearningFormPage,
					pagecount: (self.lecturesLearningFormLength - self.lecturesLearningFormPage*8) > 0 ? 8 : 8 - Math.abs(self.lecturesLearningFormLength - self.lecturesLearningFormPage*8),
					P2 : lecturesLearningID,
					szhlcode: result
				}
			}).then(response=>{ 
				console.log(response)
				self.lecturesLearningForm = self.lecturesLearningForm.concat(response.data.Result);
				this.lecturesLearningFormLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.lecturesLearningFormLoadingText = '点击加载更多';
			})
			if(this.lecturesLearningForm.length == this.lecturesLearningFormLength){
				this.lecturesLearningFormLoadingText = '信息已经更新为最新的了！';
			}
  	},
  	activityDayFormMore(){
  		this.activityDayFormPage += 1;
			var self = this;
			this.activityDayFormLoadingText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'JYGL_GETJYLISTBYAPP',
					p: self.activityDayFormPage,
					pagecount: (self.activityDayFormLength - self.activityDayFormPage*8) > 0 ? 8 : 8 - Math.abs(self.activityDayFormLength - self.activityDayFormPage*8),
					P2 : activityDayID,
					szhlcode: result
				}
			}).then(response=>{ 
				console.log(response)
				self.activityDayForm = self.activityDayForm.concat(response.data.Result);
				this.activityDayFormLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.activityDayFormLoadingText = '点击加载更多';
			})
			if(this.activityDayForm.length == this.activityDayFormLength){
				this.activityDayFormLoadingText = '信息已经更新为最新的了！';
			}
  	},
  	distanceLearningFormMore(){
  		this.distanceLearningFormPage += 1;
			var self = this;
			this.distanceLearningFormLoadingText = '正在加载中···';
			api.get(api.url.index,{ 
				params:{
					Action: 'JYGL_GETJYLISTBYAPP',
					p: self.distanceLearningFormPage,
					pagecount: (self.distanceLearningFormLength - self.distanceLearningFormPage*8) > 0 ? 8 : 8 - Math.abs(self.distanceLearningFormLength - self.distanceLearningFormPage*8),
					P2 : distanceLearningID,
					szhlcode: result
				}
			}).then(response=>{ 
				console.log(response)
				self.distanceLearningForm = self.distanceLearningForm.concat(response.data.Result);
				this.distanceLearningFormLoadingText = '点击加载更多';
			}).catch(err=>{ 
				console.log(err);
				this.distanceLearningFormLoadingText = '点击加载更多';
			})
			if(this.distanceLearningForm.length == this.distanceLearningFormLength){
				this.distanceLearningFormLoadingText = '信息已经更新为最新的了！';
			}
  	},
  	exchangeArray(val) {
			var Array = val.split(",");
			return Array.length;
		},
		meetingLearningFormShow(event){
			this.status = 0;
			localStorage.removeItem("meetingLearningDetailTitle");
			localStorage.removeItem("meetingLearningDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var meetingLearningDetailTitle;
			var meetingLearningDetailInfo;
			for(var i = 0;i < self.meetingLearningForm.length; i++){
				if(parseInt(dataId) == self.meetingLearningForm[i].ID){
					self.detailTitle = self.meetingLearningForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.meetingLearningForm[i].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					meetingLearningDetailTitle = self.detailTitle;
					meetingLearningDetailInfo = self.detailInfo;
				}
			}
			console.log(meetingLearningDetailTitle);
			localStorage.setItem("meetingLearningDetailTitle",meetingLearningDetailTitle);
			localStorage.setItem("meetingLearningDetailInfo",meetingLearningDetailInfo);
			api.post(api.url.index, {
				Action: 'JYGL_UPDATEXXNRREADUSER',
				p1:dataId,
				szhlcode: result
			}).then((response) => {
				console.log(response);
				this.status = 1;
				self.$router.push('/meetingLearningDetail');
			}).catch((error) => {
				console.log(error);
			});
		},
		lecturesLearningFormShow(){
			this.status = 0;
			localStorage.removeItem("lecturesLearningDetailTitle");
			localStorage.removeItem("lecturesLearningDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var lecturesLearningDetailTitle;
			var lecturesLearningDetailInfo;
			for(var i = 0;i < self.lecturesLearningForm.length; i++){
				if(parseInt(dataId) == self.lecturesLearningForm[i].ID){
					self.detailTitle = self.lecturesLearningForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.lecturesLearningForm[i].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					lecturesLearningDetailTitle = self.detailTitle;
					lecturesLearningDetailInfo = self.detailInfo;
				}
			}
			console.log(lecturesLearningDetailTitle);
			localStorage.setItem("lecturesLearningDetailTitle",lecturesLearningDetailTitle);
			localStorage.setItem("lecturesLearningDetailInfo",lecturesLearningDetailInfo);
			api.post(api.url.index, {
				Action: 'JYGL_UPDATEXXNRREADUSER',
				p1:dataId,
				szhlcode: result
			}).then((response) => {
				console.log(response);
				this.status = 1;
				self.$router.push('/lecturesLearningDetail');
			}).catch((error) => {
				console.log(error);
			});
		},
		activityDayFormShow(){
			this.status = 0;
			localStorage.removeItem("activityDayDetailTitle");
			localStorage.removeItem("activityDayDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var activityDayDetailTitle;
			var activityDayDetailInfo;
			for(var i = 0;i < self.activityDayForm.length; i++){
				if(parseInt(dataId) == self.activityDayForm[i].ID){
					self.detailTitle = self.activityDayForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.activityDayForm[i].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					activityDayDetailTitle = self.detailTitle;
					activityDayDetailInfo = self.detailInfo;
				}
			}
			console.log(activityDayDetailTitle);
			localStorage.setItem("activityDayDetailTitle",activityDayDetailTitle);
			localStorage.setItem("activityDayDetailInfo",activityDayDetailInfo);
			api.post(api.url.index, {
				Action: 'JYGL_UPDATEXXNRREADUSER',
				p1:dataId,
				szhlcode: result
			}).then((response) => {
				console.log(response);
				this.status = 1;
				self.$router.push('/activityDayDetail');
			}).catch((error) => {
				console.log(error);
			});
		},
		distanceLearningFormShow(){
			this.status = 0;
			localStorage.removeItem("distanceLearningDetailTitle");
			localStorage.removeItem("distanceLearningDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var distanceLearningDetailTitle;
			var distanceLearningDetailInfo;
			for(var i = 0;i < self.distanceLearningForm.length; i++){
				if(parseInt(dataId) == self.distanceLearningForm[i].ID){
					self.detailTitle = self.distanceLearningForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.distanceLearningForm[i].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					distanceLearningDetailTitle = self.detailTitle;
					distanceLearningDetailInfo = self.detailInfo;
				}
			}
			console.log(distanceLearningDetailTitle);
			localStorage.setItem("distanceLearningDetailTitle",distanceLearningDetailTitle);
			localStorage.setItem("distanceLearningDetailInfo",distanceLearningDetailInfo);
			api.post(api.url.index, {
				Action: 'JYGL_UPDATEXXNRREADUSER',
				p1:dataId,
				szhlcode: result
			}).then((response) => {
				console.log(response);
				this.status = 1;
				self.$router.push('/distanceLearningDetail');
			}).catch((error) => {
				console.log(error);
			});
		},
		viewDetailClose(){
			this.viewDetailStatus = false;
		},
  },
  components:{
		XHeader,
    Actionsheet,
		Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.study{
		height: 100%;
	}
	
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
	}
	.vux-header .vux-header-left{
		color: #fff;
	}
	
	.vux-tab{
		padding-top: 40px;
	}
	
	.vux-tab .vux-tab-item.vux-tab-selected{
		color: #f00 !important;
    border-bottom: 3px solid #f00 !important;
	}
	.vux-tab-ink-bar{
		background-color: #f00 !important;	
	}
	
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    border-width: 2px 0 0 2px !important;
	}
	
	.titleList{
		width: 100%;
		height: 3rem;
		background-color: #fff;
		overflow: hidden;
		border-bottom: 1px solid #e9e9e9;
	}
	.titleListContent{
		width: 25%;
		height: 100%;
		float: left;
		text-align: center;
		font-size: 0.5rem;
		color: #333;
	}
	.titleListContent .imgBox{
		width: 1.7rem;
		height: 1.7rem;
		border: 1px solid #333;
		border-radius: 50%;
		margin: 0.2rem auto 0.1rem;
	}
	.titleListContent .imgBox img{
		max-width: 100%;
		max-height: 100%;
		border-radius: 50%;
	}
	
	.latest-list{
		margin-top: 0.5rem;
		width: 100%;
		box-sizing: border-box;
		padding-left: 0.5rem;
		background-color: #fff;
		margin-bottom: 2.9rem;
	}
	.more{
		width: 100%;
		height: 1.75rem;
		line-height: 1.75rem;
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
		overflow: hidden;
		padding-right: 0.5rem;
	}
	.more-title{
		font-size: 0.7rem;
		color: #f00;
		float: left;
	}
	.more-icon{
		float: right;
		color: #666;
		font-size: 0.5rem;
	}
	
	.latest-listContent{
		width: 100%;
		box-sizing: border-box;
	}
	.studyList{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-right: 0.5rem;
		border-bottom: 1px solid #e9e9e9;
		position: relative;
	}
	.studyList .touchId{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.studyList-img{
		float: right;
		width: 20%;
		height: 20%;
		margin: 0.25rem 0;
	}
	.studyList-img img{
		max-width:100%;
		max-height:100%;
	}
	.studyList-title{
		width: 78%;
		float: left;
		font-size: 0.65rem;
		color: #333;
		margin-top: 0.3rem;
	}
	.studyList-time{
		font-size: 0.5rem;
		color: #999;
		position: absolute;
		bottom: 0.25rem;
		left: 0;
	}
	.studyList-view{
		font-size: 0.5rem;
		color: #999;
		position: absolute;
		bottom: 0.25rem;
		right: 25%;
	}
	.loadMore{
		font-size: 0.7rem;
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		box-sizing: border-box;
		padding-right: 0.5rem;
	}
	
	
	/*查看信息详情*/
	.viewDetail{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2001;
		background-color: rgba(0,0,0,0.5);
		box-sizing: border-box;
		padding: 1rem 1rem 4rem 1rem;
	}
	.viewDetailContent{
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0.5rem;
		text-align: center;
	}
	.viewDetailContent-title{
		width: 100%;
		font-size: 0.8rem;
		color: #333;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.viewDetailContent-info{
		width: 100%;
		height: 88%;
		font-size: 0.5rem !important;
		color: #666;
		text-align: left;
		/*text-indent: 1rem;*/
		line-height: 0.8rem;
		display:block;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: scroll;
	}
	.viewDetailContent-info p{
		line-height: 1rem !important;
	}
	.viewDetailContent-info p span{
		font-size: 0.5rem !important;
	}
	
	.viewDetailContent-info img{
		max-width: 100% !important;
    	width: initial !important;
    	height: initial !important;
	}
	.viewDetailContent-info table{
		width: initial !important;
		max-width: 100% !important;
	}
	.viewDetailClose{
		position: fixed;
		bottom: 2rem;
		left: 50%;
		margin-left: -0.75rem;
		font-size: 1.5rem;
		color: #fff;
		z-index: 2002;
	}
	
	
	
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}
</style>
